<template>
<div>
    <el-dialog :title="$t('DEVICE.DEVICEDEL')" :close-on-click-modal="false"  :visible.sync="show" v-if="!isPhone"
     class="my_devices_dialog" :before-close="cancle">
    <div class="my_devices_del">
      <p class="title">{{del_item.product_title}}</p>
      <p v-html="$t('DEVICE.DELTIP')"></p>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button  @click="cancle">{{$t('DEVICE.CANCLE')}} </el-button>
      <el-button type="search" @click="submitForm">{{$t('DEVICE.DEL')}} </el-button>
    </span>
  </el-dialog>
  <el-dialog  :close-on-click-modal="false"  :visible.sync="show" v-if="isPhone" :modal="false"
  class="my_devices_dialog phoneShowDel" :before-close="cancle"  :show-close="false">
    <div class="">
      <p v-html="$t('DEVICE.DELTIP')"></p>
    </div>
    <div slot="footer" >
      <span class="cancle" @click="cancle">{{$t('DEVICE.CANCLE')}} </span>
      <span class="del"  @click="submitForm">{{$t('DEVICE.DEL')}} </span>
    </div>
  </el-dialog>
</div>

 
</template>

<script>
import { mapGetters } from 'vuex'

import { del } from '@/api/personalCenter/devices.js'
export default {
  props: {
    show: Boolean,
    closeDialog:Function,
  },
  data () {
    return {
      del_item: {},
      del_item_id : []
    }
  },
  computed: {
    ...mapGetters(['isPhone']),
  },
  watch: {
    show: function() {
      if(this.show) {
        let del_item = this.$parent.del_item
        let array = []
        array.push(del_item.id)
        this.del_item  = del_item
        this.del_item_id  = array
      }
    }
  },
  methods: {
    cancle() {
      this.$emit('closeDialog')
    },
    submitForm(){
      this.delSite()
    },
    delSite(){
      let params = {
        del_id: JSON.stringify(this.del_item_id) 
      }
      del(params).then(res=>{
        if(res.state == 1){
          this.$message.success('del success')
          this.cancle()
        }
      })

    }
  }
}
</script>

<style>

</style>